<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
      class="demo-ruleForm">
      <!-- 输入手机号 -->
      <el-form-item label="手机号" prop="phone">
        <el-input v-model.number="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="ruleForm.pwd" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  <script setup lang="ts">
  
  import router from '../router/index'
  // 引入vue的响应式数据引用
  import { reactive, ref } from 'vue'
  // 引入Element Plus的表单校验组件
  import type { FormInstance, FormRules } from 'element-plus'
  // 引入Element Plus的消息框
  import { ElMessage } from 'element-plus'
  // 引入api中的函数
  import { loginApi } from '../api/api';
  // 这个ref对象的.value属性指向你传入的参数值。
  // 当.value被修改时，所有依赖这个ref的地方都会自动更新。
  const ruleFormRef = ref<FormInstance>()
  // 检查手机号是否合法
  const checkPhone = (rule: any, value: any, callback: any) => {
    var regexp = /^1[3-9]\d{9}$/
    if (!value) {
      return callback(new Error('手机号不能为空'));
    }
    else if (!regexp.test(value)) {
      return callback(new Error('手机号格式不正确'));
    } else {
      callback();
    }
  }
  const validatePass = (rule: any, value: any, callback: any) => {
    const regex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*_)[a-zA-Z\d_]{8,16}$/
    if (!value) {
      callback(new Error('密码不能为空'))
    } else if (!regex.test(value)) {
      callback(new Error('密码格式不正确'))
    } else {
      callback()
    }
  }
  // vm: 数据绑定的位置
  const ruleForm = reactive({
    phone: '15281802937',
    pwd: 'Aa12345_',
  })
  // 给表单元素绑定校验规则,并设定校验触发机制条件
  const rules = reactive<FormRules<typeof ruleForm>>({
    pwd: [{ validator: validatePass, trigger: 'blur' }],
    phone: [{ validator: checkPhone, trigger: 'blur' }],
  })
  // 声明一个登录函数
  // 使用 async/await 可以使异步代码看起来和同步代码一样，这有助于提升代码的可读性和可维护性
  async function handleLogin() {
    try {
      const response = await loginApi(ruleForm);
      // 测试
      console.log(response.data); // 访问 data
      console.log(response.code); // 访问 code
  
  
      // 当后端返回200表示登录成功
      if (response.code === 200) {
        ElMessage({
          message: '登录成功',
          type: 'success',
          plain: true,
          duration: 1000
          
        })
        setTimeout(() => {
          localStorage.setItem('sysuser', JSON.stringify(response.data));
          router.push('/index')
        }, 1000)
        console.log(111)
      } else {
        // 非200时, 提示出后端返回的业务异常信息, 例如: 用户名或密码不正确
        ElMessage({
          message: response.msg,
          type: 'error',
          plain: true,
          duration: 1500
        })
      }
    } catch (error) {
      // 当出现前端异常时, 也应该给出合理提示
      ElMessage({
        message: '登录失败:' + error,
        type: 'error',
        plain: true,
        duration: 1500
      })
    }
  }
  // 提交表单的触发函数
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      // 执行数据校验
      if (valid) {
        // 校验通过,打印表达中的字段信息
        console.log(ruleForm)
        // 调用函数, 执行axios
        handleLogin();
      } else {
        console.log('数据格式有误')
      }
    })
  }
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  </script>
  <style scoped></style>